<!--

    Copyright 2016-2017, Huawei Technologies Co., Ltd.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->

<h4>{{message}}</h4>

<div id="notificationArea" ng-init="init()">
    <button type="button" class="btn btnDefault btnmrg" ng-click="showError()">Error</button>
    <button type="button" class="btn btnDefault btnmrg" ng-click="showWarning()">Warning</button>
    <button type="button" class="btn btnDefault btnmrg" ng-click="showInfo()">Information</button>
    <button type="button" class="btn btnDefault btnmrg" ng-click="showConfirm()">Confirm</button>

   <!-- <label class="labelstyle">Label</label>-->

    <div class="shortnote">
        <div class="shortnoteHeader">Usage</div>
        <div class="shortnoteText">Create a button in html file and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
        <br>
        <div>HTML file:</div>
        <pre><code>&ltbutton type="button" class="btn btn-default" ng-click="showError()"&gtCreate&lt/button&gt</code></pre>
        <br>
        <div>Javascript file:</div>
        <pre><code>
        var data = {"err_data" : {"title": "Error","showClose": "true","closeBtnTxt": "Ok","icon": "glyphicon glyphicon-exclamation-sign","iconColor": "icon_error","msg":"<<Please input your message here>>","buttons": []}};

            $scope.showError = function() {
            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
            var html = Mustache.to_html(dialog_tpl, data.err_data);
            $(html).modal({backdrop: "static"});//backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!
        }</code></pre>

    </div>
    </div>
</div>
